<template>
	<view class="content">
		<view class="banner">
			<view class="area icon"  :class="{'active':selectFlag == 1}" @click="areaChange">{{name[0]}}</view>
			<view class="style icon" :class="{'active':selectFlag == 2}" @click="styleChange">{{name[1]}}</view>
			<view class="type icon" :class="{'active':selectFlag == 3}" @click="typeChange">{{name[2]}}</view>
		</view>
		<view class="listItem">
			<view class="areaItem" :class="{'selected':selectFlag == 1}">
				<view class="itemList" :class="{ selectindex: index === selectItem }" @click="selectQItem(index)"
					v-for="(item,index) in arealList" :key="index">{{item.name}}</view>
			</view>
			<view class="styleItem" :class="{'selected':selectFlag == 2 }">
				<view class="itemList" :class="{ selectindex: index === selectItem }" @click="selectFItem(index)"
					v-for="(item,index) in styleList" :key="index">{{item.name}}</view>
			</view>
			<view class="typeItem" :class="{'selected':selectFlag == 3 }">
				<view class="itemList" :class="{ selectindex: index === selectItem }" @click="selectHItem(index)"
					v-for="(item,index) in modelList" :key="index">{{item.name}}</view>
			</view>
		</view>
		<view class="items" v-for="item in list" @click="tobuildingdatails(item.id)">
			<image style="width: 165px; height: 140px;" :src="item.thumb" mode="aspectFill"></image>
			<view class="mask">
				<view class="mask_title">{{item.name}}</view>
				<view class="mask_content">{{item.model.name}}/{{item.style.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:["区域","风格","户型"],
				selectFlag: 0,
				arealList: [],
				styleList: [],
				modelList: [],
				selectItem: -1,
				selectItem: -1,
				selectItem: -1,
				list:[]
			};
		},
		methods: {
			tobuildingdatails(id){
				uni.navigateTo({
					url:"/pages/building/buildingdetails?id="+id
				})
			},
			selectQItem(index) {
				this.selectItem = index;
				this.name[0]=this.arealList[index].name
			},
			selectFItem(index) {
				this.selectItem = index;
				this.name[1]=this.styleList[index].name
			},
			selectHItem(index) {
				this.selectItem = index;
				this.name[2]=this.modelList[index].name
			},
			areaChange() {
				if (this.selectFlag != 1) {
					this.selectFlag = 1
				} else {
					this.selectFlag = 0
				}
			},
			styleChange() {
				if (this.selectFlag != 2) {
					this.selectFlag = 2
				} else {
					this.selectFlag = 0
				}
			},
			typeChange() {
				if (this.selectFlag != 3) {
					this.selectFlag = 3
				} else {
					this.selectFlag = 0
				}
			},
			show() {
				var then = this
				this.$http.post("/system/getBuildList", {
					"page": 1,
					"limit": 10,
					"style": 0,
					"area": 0,
					"model": 0
				}).then(res => {
					console.log(res)
					then.list = res.data.data.list
				})
			},
			getdata() {
				var then = this
				this.$http.post("/system/getBaseInfo", {}).then(res => {
					console.log(res)
					then.arealList = res.data.data.arealList
					then.styleList = res.data.data.styleList
					then.modelList = res.data.data.modelList
					
				})
			}
		},
		onLoad() {
			this.show(),
				this.getdata()
		}
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		.listItem {
			width: 100vw;
			--t: all .3s ease-in-out;

			.itemList {
				width: 100%;
				height: 70rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				text-align: center;
				transition: var(--t);
			}

			.areaItem {
				height: 0;
				overflow: hidden;
				transition: var(--t);
			}

			.styleItem {
				height: 0;
				overflow: hidden;
				transition: var(--t);
			}

			.typeItem {
				height: 0;
				overflow: hidden;
				transition: var(--t);
			}

			.selected {
				height: var(--h);
			}

			.selectindex {
				color: #5aaa53;
			}
		}

		.banner {
			width: 100vw;
			line-height: 98rpx;
			height: 98rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;

			.icon {
				width: 130rpx;
				background: url("../../static/images/icon/expand-icon.png") no-repeat;
				background-position: right;
				margin-left: 20rpx;
				transition: .1s linear;
			}

			.active {
				color: #5aaa53;
				background: url("../../static/images/icon/icon-up.png") no-repeat;
				background-position: right;
				margin-left: 20rpx;
				transition: .1s linear;
			}
		}

		.items {

			flex-basis: 44%;
			padding: 10px;

			image {
				width: 100%;
				border-radius: 10px 10px 0 0;
			}

			.mask {

				width: 100%;
				height: 49px;
				background-color: #fff;
				transform: translateY(-5px);
				box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
				border-radius: 0 0 10px 10px;

				.mask_title {
					font-size: 26rpx;
					text-indent: 10rpx;
				}

				.mask_content {
					font-size: 24rpx;
					color: #aaa;
					text-indent: 10rpx;
				}
			}
		}
	}
</style>
